﻿var content = view.appendElement("<div x=\"0\" y=\"0\" height=\"100%\" width=\"100%\"></div>");

function view_onOpen() {
    detailsViewData.putValue("confirmed", false);
    new drawScreen();
}

function Header(screen, height, colorBackground, text) {
    var aux = Math.floor( (height - 22) / 2);
		this.shadow = screen.appendElement("<div x=\"0\" y=\"0\" height=\""+height+"\" width=\"100%\" background=\""+colorBackground+"\"></div>");
		this.label = this.shadow.appendElement("<label x=\"17\" y=\""+aux+"\" width=\"100%\" height=\""+(height-2)+"\" vAlign=\"middle\" bold=\"true\" color=\"#0071BC\">"+text+"</label>");
		this.bolinha = screen.appendElement("<div x=\"8\" y=\""+8+"\" width=\"6\" height=\"6\"  background=\"resources\\container\\bolinhaDosTitulos.png\"></div>");
}

function Label(screen, colorPostIt,  x, y, width, height, text) {
		src = "resources\\postIt\\layout_" +colorPostIt+"\\";
		this.postIt = screen.appendElement("<div x=\""+x+"\" y=\""+y+"\" width=\"9\" height=\""+height+"\" background=\""+src+"postItCantoEsquerdo.png\"></div>");
		this.postIt2 = screen.appendElement("<div x=\""+(x+width+9)+"\" y=\""+y+"\" width=\"9\" height=\""+height+"\" background=\""+src+"postItCantoDireito.png\"></div>");
		this.postIt3 = screen.appendElement("<div x=\""+(x+9)+"\" y=\""+y+"\" width=\""+width+"\" height=\""+height+"\" background=\""+src+"postItBarra.png\"></div>");
    this.label = screen.appendElement("<label x=\""+(x+6)+"\" y=\""+(y+2)+"\" color=\"#FFFFFF\" width=\""+width+"\" height=\""+height+"\">"+text+"</label>");
};

function BorderEdit(screen, x, y, width, height, colorBorder, colorOver, defaultValue) {
    var self = this;
    this.border = screen.appendElement("<div x=\""+x+"\" y=\""+y+"\" height=\""+height+"\" width=\""+width+"\" background=\""+colorBorder+"\"></div>");
    this.edit = this.border.appendElement("<edit x=\""+1+"\" y=\""+1+"\" height=\""+(height-2)+"\" width=\""+(width-2)+"\" wordwrap=\"true\" multiline=\"true\" />");
    if (colorOver) {
        this.edit.enabled = true;
        this.edit.value = defaultValue;
        this.edit.onfocusin = function() {
            self.border.background = colorOver;
        };
        this.edit.onmouseover = function() {
            self.border.background = colorOver;
        };
        this.edit.onmouseout = function() {
            self.border.background = colorBorder;
        };
        this.edit.onfocusout = function() {
            self.border.background = colorBorder;
        };
    }
}
function Button(screen, x, y, text, onClick) {
    var self = this;
    this.button = screen.appendElement("<div enabled=\"true\" height=\"22\" width=\"83\" x=\""+x+"\" y=\""+y+"\" background=\"resources/preferences/buttons/shortButton.png\"><label height=\"22\" width=\"83\" x=\"0\" y=\"0\" align=\"center\" valign=\"middle\">"+text+"</label></div>");
    if (onClick) {
        this.button.onmouseup = function() { self.button.background = "resources/preferences/buttons/shortButton.png"; };
        this.button.onmousedown = function() { self.button.background = "resources/preferences/buttons/shortButtonApertado.png"; };
        this.button.onclick = function() {
            onClick();
        };
    }
}

function drawScreen() {
    content.background = "#FFFFFF";
    var self = this;
    this.headerLabel = new Header( content, 22, "resources/container/barraDeTitulo.png" , detailsViewData.getValue("title"));
    this.taskLabel = new Label( content, "navy",  7, 30, 165, 20, DETAILS_TASK );
    this.taskLabel.label.bold = true;
    this.task = new BorderEdit( content, 7, 49, 183, 43, "#000000", "#0071bc" , detailsViewData.getValue("task"));
    this.descLabel = new Label( content, "navy", 7, 100, 165, 20, DETAILS_DESC );
    this.descLabel.label.bold = true;
    this.desc = new BorderEdit( content, 7, 119, 183, 86, "#000000", "#0071bc" , detailsViewData.getValue("description"));
    this.expLabel = new Label( content,"orange",  10, 210, 158, 20, DETAILS_EXPIRATION);
    this.expLabel.label.bold = true;
    this.dayLabel = new Label( content, "green", 14, 232, 50, 20, DETAILS_DAY );
    this.monthLabel = new Label( content, "green", 70-6, 232, 50, 20, DETAILS_MONTH );
    this.yearLabel = new Label( content, "green", 125-12, 232, 53, 20, DETAILS_YEAR );
    
    if(detailsViewData.getValue("expires")){
		this.day = new BorderEdit( content, 15, 251, 50, 22, "#a7ffba", "#61c376" , detailsViewData.getValue("day"));
		this.month = new BorderEdit( content, 70-6, 251, 50, 22, "#a7ffba", "#61c376" , detailsViewData.getValue("month") );
		this.year = new BorderEdit( content, 125-12, 251, 70, 22, "#a7ffba", "#61c376" , detailsViewData.getValue("year"));
    } else {
   		this.day = new BorderEdit( content, 15, 251, 50, 22, "#a7ffba", "#61c376" , "");
		this.month = new BorderEdit( content, 70-6, 251, 50, 22, "#a7ffba", "#61c376" , "");
		this.year = new BorderEdit( content, 125-12, 251, 70, 22, "#a7ffba", "#61c376" , "");
    }

    this.sendData = function() {
    // This line goes the data to the main widget.
        detailsViewData.putValue("task", self.task.edit.value);
        detailsViewData.putValue("description", self.desc.edit.value);
        detailsViewData.putValue("day", self.day.edit.value);
        detailsViewData.putValue("month", self.month.edit.value);
        detailsViewData.putValue("year", self.year.edit.value);
        detailsViewData.putValue("expirationDate",valid_date(Math.floor(parseFloat(self.day.edit.value)), Math.floor(parseFloat(self.month.edit.value)), Math.floor(parseFloat(self.year.edit.value))) );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    } 
    
		this.confirm = new Button(content, 59, 278, "Ok", self.sendData );
    
}




// TODO move this to details.js and replace it
